<template>
  <table class="batch-table">
    <thead style="display: table-header-group; width: 100%">
      <tr
        class="tltle-tr"
        v-if="
          (lastItem && lastItem.IsPaging != false) ||
          (!lastItem && item.JobTempletIndex >= 1)
        "
        style="width: 100%"
      >
        <td>
          <div class="header-show">
            <ul class="ul-header">
              <li class="li-img">
                <img src="@/assets/img/nbclogo.png" alt="" />
              </li>
              <li class="li-no">
                <span>文件编号:{{ mateCurrentInfo.JobGroupNo || "/" }}</span>
                <span
                  >版次:{{ mateCurrentInfo.JobTempletVisionOut || "/" }}</span
                >
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr
        style="border: none"
        v-if="mateCurrentInfo && !lastItem && item.JobTempletIndex >= 1"
      >
        <td style="border: none; text-align: center">
          <h3 style="text-align: center">{{ mateCurrentInfo.JobGroupName }}</h3>
        </td>
      </tr>
      <tr
        style="border: none"
        v-if="
          (lastItem && lastItem.IsPaging != false) ||
          (!lastItem && item.JobTempletIndex >= 1)
        "
      >
        <td style="border: none; flex: 1">{{ item.JobTempletName }}</td>
      </tr>
      <!-- 聚合表单头部 Start -->
      <tr style="margin-bottom: -1px">
        <td
          v-for="hdata in headerList"
          :key="hdata.JobItemID"
          :class="[
            hdata.levelList ? 'flex-big' : '',
            hdata.levelDataType == 9 ? 'png-flex-box' : '',
          ]"
        >
          <span :class="[hdata.levelList ? 'article-bottom' : 'article-lh']">{{
            hdata.levelName
          }}</span>
          <span class="leve-list" v-if="hdata.levelList">
            <span
              :class="['leve-list-box']"
              v-for="(ldata, lidx) in hdata.levelList"
              :key="lidx"
            >
              {{ ldata.levelName }}
            </span>
          </span>
        </td>
      </tr>
      <!-- 聚合表单头部 End -->
    </thead>
    <tbody v-if="isShowBody">
      <tr v-for="(mdata, midx) in list" :key="midx">
        <td
          v-for="(termData, termIdx) in mdata"
          :key="termIdx"
          :class="[
            'tbody-tr',
            termData && termData.isShow ? 'flex-big' : '',
            termData && termData.levelDataType == 9 ? 'png-flex-box' : '',
          ]"
        >
          <span class="leve-list" v-if="termData && termData.isShow">
            <span
              class="leve-list-box"
              v-for="(ldata, lidx) in termData.levelList"
              :key="lidx"
            >
              <!-- 图片,签名展示框 -->
              <png-box
                :item="ldata"
                v-if="ldata.levelDataType == 8 || ldata.levelDataType == 9"
                :isTemplate="isTemplate"
                :currentValue="currentValue"
              ></png-box>
              <!-- 图片,签名展示框 -->
              <span v-if="ldata.levelDataType != 8 && ldata.levelDataType != 9">
                {{
                  ldata.levelDataType == 7
                    ? dateTimeFormatFun(ldata.levelValue)
                    : ldata.levelValue || "/"
                }}
              </span>
            </span>
          </span>

          <span v-else>
            <!-- 图片,签名展示框 -->
            <png-box
              :item="termData"
              v-if="
                (termData && termData.levelDataType == 8) ||
                (termData && termData.levelDataType == 9)
              "
              :currentValue="currentValue"
              :isTemplate="isTemplate"
            ></png-box>
            <!-- 图片,签名展示框 -->
            <span
              v-if="
                termData &&
                termData.levelDataType != 8 &&
                termData.levelDataType != 9
              "
            >
              {{
                termData.levelDataType == 7
                  ? dateTimeFormatFun(termData.levelValue)
                  : termData.levelValue || "/"
              }}
            </span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import PngBox from "../assembly/PngBox.vue"; //图片展示
import { getConfig } from "@/api/ConfigApi/index";
export default {
  props: [
    "headerList",
    "list",
    "item",
    "lastItem",
    "mateCurrentInfo",
    "isShowBody",
    "isTemplate",
  ],
  components: {
    PngBox,
  },
  data() {
    return {
      currentValue: null,
    };
  },
  methods: {
    /* 检验是否为纯数字的字符串 */
    isNUmber(num) {
      return /^[0-9]+.?[0-9]*$/.test(num);
    },
    /* 清零 */
    removeTrailingZeros(number) {
      if (!this.isNUmber(number)) {
        if (number === "" || number === null || number === undefined) {
          return "/";
        } else {
          return number;
        }
      }

      if (number === "" || number === null || number === undefined) {
        return 0;
      } else {
        if (number.toString().includes(".")) {
          // parseFloat会自动去掉0 Number()也可以
          let str = "" + parseFloat(number);
          return str;
        } else {
          return number;
        }
      }
    },
    /* 签名方向 */
    async openFun() {
      let res = await getConfig("启用横向批记录签名");
      this.currentValue = res.Data.ConfigValue;
    },
  },
  mounted() {
    this.openFun();
  },
};
</script>

<style lang="less" scoped>
.batch-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;

  /* 表格主体 */
  .batch-tbody {
    padding: 0.625rem 0;

    /* 表格每行 */
    tr {
      border: 1px solid #000;
      display: flex;
      border-collapse: collapse;
      width: 100%;
      page-break-inside: avoid;
      margin: -0.0625rem 0px -0.0625rem 0px;
      color: #000000 !important;
      font-size: 0.8125rem !important;

      /* 表格每行左右列 */
      td {
        flex: 1;
        padding: 0.3125rem 0.625rem;
        color: #000000 !important;
        font-size: 0.8125rem !important;
      }

      td:nth-child(1) {
        border-right: 1px solid #000;
      }
    }

    .table-name {
      display: none;
      width: 100% !important;
      border: none !important;
      page-break-inside: unset !important;

      .table-name-td {
        border: none !important;
        width: 100% !important;
        text-align: center !important;
      }
    }
  }
}

/* 打印展示项 */
// .header,
// .header-space,
// .footer,
// .footer-space {
//   display: none;
//   height: 6.25rem;
// }

/* 打印展示项  页眉css */
.header-show {
  display: none;

  .ul-header {
    width: 100% !important;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.625rem;

    border-bottom: 1px solid #787777;

    .li-img {
      flex: 2;
      display: flex;
      justify-content: flex-start;

      img {
        height: 3.125rem;
        width: 9.375rem;
        page-break-inside: avoid;
      }
    }

    .li-no {
      flex: 1;
      display: flex;
      font-size: 0.875rem !important;
      justify-content: space-around;
    }
  }
}

table {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed;

  border-collapse:collapse thead {
    width: 100% !important;
  }
}

.tltle-tr {
  border: 0;
  width: 100% !important;

  tr {
    border: 0;
    width: 100% !important;
  }

  td {
    width: 100% !important;
    border: 0;
    flex: 1;
  }
}

tr {
  width: 100%;
  display: flex;
  border: 1px solid #000;
  font-size: 0.8125rem !important;
  // overflow: hidden;
  page-break-inside: avoid;

  td {
    flex: 1;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    font-size: 0.8125rem !important;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #000;
    word-break: break-word;
    .leve-list {
      flex: 1;
      display: flex;

      .leve-list-box {
        flex: 1;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #000;
      }

      .leve-list-box:last-child {
        border: 0;
      }
    }
  }

  td:last-child {
    border: 0;
  }
}

.article-bottom {
  border-bottom: 1px solid #000;
}

.flex-big {
  flex: 4;
  width: 0;
  word-break: break-word;
}
.png-flex-box {
  flex: 0 0 5rem;

  overflow: hidden;
  word-break: break-word;
}
.png-signature-box {
  height: 3.125rem;
}

.tbody-tr {
  border-top: 0;
  word-break: break-word;
}

.tbody-flex {
  border-top: 0;
}

.margin-tr {
  margin-top: -1px;
  margin-bottom: -1px;
}
</style>
